<template>
    <div id="app">
        <div class="clouds">
            <img src="@/assets/cloud1.png" style="--i:1;">
            <img src="@/assets/cloud2.png" style="--i:2;">
            <img src="@/assets/cloud3.png" style="--i:3;">
            <img src="@/assets/cloud4.png" style="--i:4;">
            <img src="@/assets/cloud5.png" style="--i:5;">
            <img src="@/assets/cloud1.png" style="--i:10;">
            <img src="@/assets/cloud2.png" style="--i:9;">
            <img src="@/assets/cloud3.png" style="--i:8;">
            <img src="@/assets/cloud4.png" style="--i:7;">
            <img src="@/assets/cloud5.png" style="--i:6;">
        </div>
        <ChatBoxe />
    </div>
</template>

<script>
import ChatBoxe from './components/ChatBoxe.vue'

export default {
    name: 'App',
    components: {
        ChatBoxe
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("") 0% 0% / 32px 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#app .clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

#app .clouds img {
    position: absolute;
    bottom: 0;
    max-width: 100%;
    animation: animate calc(3s * var(--i)) linear infinite;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    25%,
    79% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(3);
    }
}

@media screen and (max-width: 600px) {
    #app {
         background: url("") 0% 0% / 32px 100%;
        background-size: cover;
        background-position: bottom;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}</style>
